<template lang="html">
  <div class="">
    <div class="search">
      <div class="input">
        <p><label>姓名：</label><el-input v-model="searchData.name" placeholder="请输入内容"/></p>
        <p>
          <label>手机号：</label><el-input v-model="searchData.mobile" placeholder="请输入内容"/>
        </p>
        <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
      </div>
    </div>
    <div class="add">
        <el-button type="primary" @click="add">新增专员</el-button>
        <el-button type="danger" @click="batchDel">批量删除</el-button>
    </div>
    <tableVue v-loading="pageData.loading" :list="list" :state="true" :total="total" @sizeChange="handSize" @changeData="selectionVal">
      <slot>
        <el-table-column label="操作" align="center" width="450px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="details(scope.row)">详情
            </el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">查看二级专员
            </el-button>
            <el-button
              size="mini"
              @click="compile(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              class="del"
              @click="del(scope.row)">删除</el-button>
              <el-button
                v-if="scope.row.jobStatus == '进行中'"
                size="mini"
                type="danger"
                class="del"
                @click="stop(scope.row)">停止任务</el-button>
          </template>
        </el-table-column>
      </slot>
    </tableVue>
    <dialogVue :dialog="dialog" :state="false" title="操作" @close="changeData">
      <slot>
        <el-form ref="ruleForm" :model="pageData" label-width="200px" class="demo-ruleForm">
          <el-form-item label="专员姓名">
            <el-input v-model="pageData.promoterName" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="pageData.promoterMobile" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="pageData.promoterLevel" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option
                v-for="item in tally"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="pageData.promoterIdcard" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="任务人数">
            <el-input v-model="pageData.jobNum" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="备注说明">
            <el-input v-model="pageData.promoterRemark" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="任务开始时间">
            <el-date-picker
                v-model="pageData.jobStartTime"
                type="date"
                placeholder="选择时间">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="任务结束时间">
            <el-date-picker
                v-model="pageData.jobDeadTime"
                type="date"
                placeholder="选择时间">
              </el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="发展下级推广员">
            <el-select v-model="pageData.isSubordinate" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option
                v-for="item in subordinate"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item> -->
          <el-form-item label="任务状态">
            <el-select v-model="pageData.jobStatus" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option
                v-for="item in jobStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item class="confirm">
            <el-button v-if="btnState == '1'" type="primary" @click="upForm('post')">提交</el-button>
            <el-button v-if="btnState == '2'" type="primary" @click="upForm('put')">更新</el-button>
          </el-form-item>
        </el-form>
      </slot>
    </dialogVue>
    <el-dialog
    title="提示"
    :visible="dialogVisible"
    :before-close="handleClose"
    width="80%">
    <div class="listP">
      <p v-for='(item,key) in delist' v-if="listData[key]">
          <span class="dst">{{listData[key]}}</span>：
          <span>{{item}}</span>
      </p>
    </div>
    <div class="renshu">
        <p>
            <span>任务人数</span>：
            <span class="r">{{rtotal}}</span>
        </p>
        <p>
            <span>无效人数</span>：
            <span class="r">{{failTotal}}</span>
        </p>
        <p>
            <span>已完成</span>：
            <span class="r">{{successTotal}}</span>
        </p>
        <p>
            <span>今日完成</span>：
            <span class="r">{{todayTotal}}</span>
        </p>
    </div>
    <tableVue
      v-loading="pageData.loading"
      :list="attacheList"
      :state="true"
      :total="attachetotal"
      @sizeChange="attachehandSize">
      <slot>
        <!-- <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">详情
            </el-button>
          </template>
        </el-table-column> -->
      </slot>
    </tableVue>
    <span slot="footer" class="dialog-footer" style="margin-top: 41px;">
    </span>
  </el-dialog>
  </div>
</template>
<script>
import Data from './index.js'
import dialogVue from '@/components/dialog.vue'
import tableVue from '@/components/alltable.vue'
import {
  promoterList,
  addPromoter,
  getpromoterDetails,
  delpromoter,
  stopTask,
  countTask,
  userList
} from '@/api/activity/promoter'
export default {
  components: {
    tableVue,
    dialogVue
  },
  data() {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted () {
    this.getPromoter();
  },
  methods: {
    attachehandSize (val) {
      var data = {
        size : '10',
        current : val,
        promoterId : this.id
      }
      this.getuserList(data)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.dialogVisible = false;
        })
        .catch(_ => {});
    },
    getPromoter (data) {
      promoterList (data).then(res=>{
         this.pageData.loading = true;
        if (res.data.code == 'OK') {
          this.pageData.loading = false;
            this.total = res.data.data.total;
            this.list.tbody = res.data.data.records.map(item=>{
              item.gmtCreate = this.switchTime(item.gmtCreate);
              item.gmtUpdate = this.switchTime(item.gmtUpdate);
              item.jobDeadTime = this.switchTime(item.jobDeadTime);
              item.jobStartTime = this.switchTime(item.jobStartTime);
              item.promoterLevel = '一级专员';
              switch (item.jobStatus) {
                case '1' : item.jobStatus = '未开始'
                  break;
                case '2' : item.jobStatus = '进行中'
                  break;
                case '3' : item.jobStatus = '结束'
                  break;
                default:

              }
              return item
            })
        }
      })
    },
    getuserList (data) {
      userList (data).then(res=>{
        if (res.data.code == 'OK') {
          this.attachetotal = res.data.data.total;
          this.attacheList.tbody = res.data.data.records.map(item=>{
            item.gmtCreate = this.switchTime(item.gmtCreate);
            item.gmtUpdate = this.switchTime(item.gmtUpdate);
            item.jobDeadTime = this.switchTime(item.jobDeadTime);
            item.jobStartTime = this.switchTime(item.jobStartTime);
            return item
          })
        }
      })
    },
    search () {
      var data = {
        name : this.searchData.name,
        mobile : this.searchData.mobile,
        size : '10',
      }
      this.getPromoter(data);
    },
    add () {
      this.btnState = '1';
      this.pageData = {};
      this.dialog = true;
    },
    handSize (val) {
      this.val = val;
      var data = {
        size : '10',
        current : val,
      }
      this.getPromoter(data)
    },
    handleEdit (item) {
      this.$router.push({
        name : 'twoattache',
        query : {
          id : item.promoterId,
          name : item.promoterName
        }
      })
    },
    compile (item) {
      getpromoterDetails (item.promoterId).then(res=>{
          if (res.data.code == 'OK') {
            var item = res.data.data;
            this.pageData.promoterId =  item.promoterId;
            this.pageData.promoterLevel = item.promoterLevel;
            this.pageData.promoterName = item.promoterName;
            this.pageData.promoterMobile = item.promoterMobile;
            this.pageData.promoterIdcard = item.promoterIdcard;
            this.pageData.jobNum = item.jobNum;
            this.pageData.jobStartTime = item.jobStartTime;
            this.pageData.jobDeadTime = item.jobDeadTime;
            this.pageData.jobStatus = item.jobStatus;
            this.pageData.promoterRemark = item.promoterRemark;
            this.pageData.promoterLevel = item.promoterLevel;
          }
      })

      this.dialog = true;
      this.btnState = '2';
    },
    getcountTask (id) {
      countTask(id).then(res=>{
         if (res.data.code == 'OK') {
           this.todayTotal = res.data.data.todayTotal;
           this.failTotal = res.data.data.failTotal;
           this.successTotal = res.data.data.successTotal
         }
      })
    },
    details (item) {
      this.id = item.promoterId;
      this.dialogVisible = true;
      this.getcountTask(item.promoterId);
      this.getuserList({promoterId : item.promoterId,size : '10',current : 1,})
      getpromoterDetails(item.promoterId).then(res=>{
         if (res.data.code == 'OK') {
           this.delist = res.data.data;
           this.rtotal = res.data.data.jobNum
           this.delist.jobDeadTime = this.switchTime(item.jobDeadTime);
           this.delist.jobStartTime = this.switchTime(item.jobStartTime);
           if (this.delist.promoterLevel == 1) {
             this.delist.promoterLevel = '一级专员'
           } else {
             this.delist.promoterLevel = '二级专员'
           }
         }
      })
    },
    del(item) {
      this.delMessage(() => {
        const arr = []
        arr.push(item.promoterId)
        delpromoter(arr).then(res => {
          if (res.data.code == 'OK') {
            this.$message.success('删除成功')
            this.getPromoter({current : this.val})
          }
        })
      })
    },
    selectionVal (data) {
      this.data = data;
    },
    upForm (method) {
      var data = {
        promoterId : this.pageData.promoterId,
        promoterLevel : this.pageData.promoterLevel,
        promoterName : this.pageData.promoterName,
        promoterMobile : this.pageData.promoterMobile,
        promoterIdcard : this.pageData.promoterIdcard,
        jobNum : this.pageData.jobNum,
        jobStartTime : +this.pageData.jobStartTime,
        jobDeadTime : +this.pageData.jobDeadTime,
        jobStatus : this.pageData.jobStatus,
        promoterRemark : this.pageData.promoterRemark,
      }
      addPromoter(data,method).then(res=>{
         if (res.data.code == 'OK') {
             this.getPromoter();
             this.dialog = false;
            if (method == 'post') {
              this.$message.success('新增成功')
            } else {
              this.$message.success('编辑成功')
            }
         } else {
           this.$message.error(res.data.message)
         }
      })
    },
    changeData (data) {
      this.dialog = data;
    },
    batchDel () {
      if (this.data.length < 1) {
        this.$message.error('请选择要删除的专员')
      } else {
        var arr = this.data.map(item=>{
          return item.promoterId
        })
        this.delMessage(() => {
          delpromoter(arr).then(res => {
            if (res.data.code == 'OK') {
              this.$message.success('删除成功')
              this.getPromoter()
            }
          })
        })
      }
    },
    stop (item) {
      this.$confirm('此操作将该任务永久停止, 是否继续?', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
              stopTask(item.promoterId).then(res=>{
                if (res.data.code == 'OK') {
                    this.$message.success('操作成功');
                    this.getPromoter({current : this.val});
                } else {
                  this.$message.error(res.data.message);
                }
              })
           }).catch(() => {
             this.$message({
               type: 'info',
               message: '已取消'
             });
           });
    }
  }
}
</script>

<style scoped>
  @import "../../../styles/common.css";
  .renshu p {
    margin-right: 20px;
    font-size: 18px;
  }
  .renshu {
    display: flex;
  }
</style>
